<template>
  <div class="refine_fbcreate">
    <h2 class="titleblue">上传反馈信息</h2>
    <div class="contant">
      <el-form :inline="true" :model="fbdetailForm" label-width="120px" class="demo-form-inline">
        <el-row :gutter="24">
          <el-form-item label="反馈人">
            <div class="inputdiv">{{sysUserName}}</div>
          </el-form-item>
          <!-- <el-form-item label="反馈时间">
                      <div class="inputdiv">{{fbdetailForm.time}}</div>
                  </el-form-item> -->
        </el-row>
        <el-row :gutter="24">
          <el-form-item label="错误信息详情">
            <el-input type="textarea" v-model="fbdetailForm.description"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="24">
          <el-form-item label="错误信息附件">
            <el-upload
              class="upload-demo"
              :action="$config.FILE_UPLOAD_URL"
              :data='uploadobj'
              :on-preview="handlePreview"
              :on-remove="uploadRemove"
              accept='.png,.jpg,.jpeg'
              :file-list="fileList"
              :limit='6'
              :headers="headers"
              :before-upload="beforeAvatarUpload"
              :on-success='uploadSuccess'
              :on-exceed="handleExceed">
              <el-button slot="trigger" size="small" type="primary">上传</el-button>

              <div slot="tip" class="el-upload__tip">上传附件</div>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
      <el-row :gutter="24" class="footerbtn">
        <el-button @click="creatsure" class="sure">确认</el-button>
        <el-button @click="creatcancel" class="sure">取消</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
  import feedbackService from '@/services/FeedbackService'
  export default {
    data:function () {
      return {
        fbdetailForm:{
          description:'',
          url:'',
          feedbackTime:''
        },
        sysUserName:'',
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        },
        uploadobj:{
          filename: '',
          mimeType: "image/jpeg",
          bus: 'feedback'
        },
        fileList:[],
      };
    },
    created () {
      this.sysUserName = this.$profile.username;
    },
    methods: {
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$alert('上传图片大小不能超过 2MB!','提示');
        }
        this.uploadobj.filename=file.name;
        return isLt2M;
      },
      uploadSuccess(res){
        this.fileList.push({name:res.data.name,url:res.data.link})
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      uploadRemove:function(res){
        var deleteItem=res.name;
        for(var n=0; n<this.fileList.length;n++){
          if(this.fileList[n].name.indexOf(deleteItem)!=-1){
            this.fileList.splice(n, 1);
          }
        }
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      handlePreview(file) {
      },
      creatsure(){
        let url = [];
        for (var n of this.fileList) {
          url.push({name:n.name,url:n.url});
        }
        let feedbackTime = new Date();
        let params= {
          sysUser: {id:this.$profile.id},
          description: this.fbdetailForm.description,
          url: JSON.stringify(url),
          feedbackTime: feedbackTime,
          type:2
        };
        feedbackService.create(params).then(()=>{
          this.$alert('发布成功', {
            callback: action => {
              this.fbdetailForm={
                description:'',
                url:'',
                feedbackTime:''
              };
              this.fileList = [];
              this.$router.go(-1)
            }
          });
        });
      },
      creatcancel(){
        this.$emit('close');
        this.fbdetailForm={
          description:'',
          url:'',
          feedbackTime:''
        };
        this.fileList = [];
        this.$router.go(-1)
      },
    }
  };
</script>

<style lang="scss">
  .refine_fbcreate {
    width:100%;
    display:inline-block;
    .inputdiv{
      width: 326px;
      border-radius: 2px;
      border: solid 1px #dddddd;
      color:#666666;
      padding: 0 15px;
      height:40px;
    }
    .el-textarea .el-textarea__inner{
      width: 785px;
      height: 70px;
      border-radius: 2px;
      border: solid 1px #dddddd;
      padding: 0 15px;
      color:#666666;
    }
    .el-form img{
      width: 62px;
      height: 64px;
      background-color: #f5f5f5;
      border-radius: 2px;
      border: solid 1px #dddddd;
      float: left;
      margin-right:10px;
    }
    .footerbtn{
      text-align: center;
      margin:30px 0 120px 0;
      width:100%;
    }
    .el-upload--text{
      float: right;
      width: 58px;
      height: 40px;
      border:none;
      border-radius: 2px;
      margin-left:5px;

      button{
        background-color: #0062cd;
        border-radius: 2px;
        border:none;
        padding:0;
        width: 58px;
        height: 40px;

      }
    }
    .el-upload__tip{
      width: 300px;
      height: 40px;
      border-radius: 2px;
      border: solid 1px #dddddd;
      float: left;
      margin-top:0;
      padding: 0 15px;
      font-size: 14px;
      color: #b9b9b9;
      text-align: left;
    }
    .el-upload-list__item.is-success .el-upload-list__item-status-label {
      display: block;
      margin-top: 0px;
    }
    .el-upload-list__item:first-child{
      margin-top: 0;
      height: 26px;
      display: inline-block;
    }
    .upload-demo{
      width:365px;
      display: inline-block;
    }
    .el-upload-list{
      display: inline-block;
    }
    .el-upload-list li{
      display: inline-block;
    }
  }
</style>
